<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>地图</title>
  <style>
  body {
    margin: 0;
    padding: 0;
  }
  #map {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .anchorBL{display:none;}
  </style>
</head>
<body>
  <div id="map"></div>

  <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=XCysCips5YQngYwbVCNH8Gxp6ezO9Yw2"></script>
  <script src="/libs/echarts.min.js"></script>
  <script src="/libs/bmap.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>


  var map = new BMap.Map("map");

  var option = {
      bmap: {
          center: [105.403119, 38.028658],
          zoom: 5,
          roam: true,
          mapStyle: {
            styleJson: [
            {
                      "featureType": "water",
                      "elementType": "all",
                      "stylers": {
                                "color": "#021019"
                      }
            },
            {
                      "featureType": "highway",
                      "elementType": "geometry.fill",
                      "stylers": {
                                "color": "#000000"
                      }
            },
            {
                      "featureType": "highway",
                      "elementType": "geometry.stroke",
                      "stylers": {
                                "color": "#147a92"
                      }
            },
            {
                      "featureType": "arterial",
                      "elementType": "geometry.fill",
                      "stylers": {
                                "color": "#000000"
                      }
            },
            {
                      "featureType": "arterial",
                      "elementType": "geometry.stroke",
                      "stylers": {
                                "color": "#0b3d51"
                      }
            },
            {
                      "featureType": "local",
                      "elementType": "geometry",
                      "stylers": {
                                "color": "#000000"
                      }
            },
            {
                      "featureType": "land",
                      "elementType": "all",
                      "stylers": {
                                "color": "#08304b"
                      }
            },
            {
                      "featureType": "railway",
                      "elementType": "geometry.fill",
                      "stylers": {
                                "color": "#000000"
                      }
            },
            {
                      "featureType": "railway",
                      "elementType": "geometry.stroke",
                      "stylers": {
                                "color": "#08304b"
                      }
            },
            {
                      "featureType": "subway",
                      "elementType": "geometry",
                      "stylers": {
                                "lightness": -70
                      }
            },
            {
                      "featureType": "building",
                      "elementType": "geometry.fill",
                      "stylers": {
                                "color": "#000000"
                      }
            },
            {
                      "featureType": "all",
                      "elementType": "labels.text.fill",
                      "stylers": {
                                "color": "#857f7f"
                      }
            },
            {
                      "featureType": "all",
                      "elementType": "labels.text.stroke",
                      "stylers": {
                                "color": "#000000"
                      }
            },
            {
                      "featureType": "building",
                      "elementType": "geometry",
                      "stylers": {
                                "color": "#022338"
                      }
            },
            {
                      "featureType": "green",
                      "elementType": "geometry",
                      "stylers": {
                                "color": "#062032"
                      }
            },
            {
                      "featureType": "boundary",
                      "elementType": "all",
                      "stylers": {
                                "color": "#1e1c1c"
                      }
            },
            {
                      "featureType": "manmade",
                      "elementType": "geometry",
                      "stylers": {
                                "color": "#022338"
                      }
            },
            {
                      "featureType": "poi",
                      "elementType": "all",
                      "stylers": {
                                "visibility": "off"
                      }
            },
            {
                      "featureType": "all",
                      "elementType": "labels.icon",
                      "stylers": {
                                "visibility": "off"
                      }
            },
            {
                      "featureType": "all",
                      "elementType": "labels.text.fill",
                      "stylers": {
                                "color": "#2da0c6",
                                "visibility": "on"
                      }
            }
          ]
          }
      },
      tooltip: {
        trigger: 'item',
        formatter(item) {
          return item.name
        }
      },
      series: [{
          type: 'scatter',
          coordinateSystem: 'bmap',
          symbolSize: 5,
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(255, 50, 64, 0.5)',
            color: 'rgba(255, 50, 64, 0.8)'
          },
          blendMode: 'lighter',
          data: []
      }]
  };

  var chart = echarts.init(document.getElementById('map'));
  chart.setOption(option);

  var bmap = chart.getModel().getComponent('bmap').getBMap();


  function init () {
    $.post('task', {time: Date.now()}, function(result) {
      var data = JSON.parse(result);

      convertData(data)
    })
  }

  function convertData (data) {
    var data = data.data;

    option.series[0].data = data.map (t => {
      return {
        name: t.daoyou_name,
        value: t.geometry.coordinates.concat([1])
      }
    })

    chart.setOption(option);
  }

  init();
  </script>
</body>
</html>
